<template>
  <div class="report">
    <dl v-for="(item, index) in state.classAll" :key="index">
      <dt>
        <h4>{{ item.classesName }}</h4>
        <div>异常：{{ item.errorCount }}项</div>
      </dt>
      <dd v-for="project in item.list" :key="project.detectionProjectId">
        <h6>{{ project.detectionProjectName }}</h6>
        <div class="btn_group">
          <van-icon
            name="passed"
            color="#3ED608"
            size="22"
            v-show="project.status"
          />
          <van-icon
            name="passed"
            color="#A9B7C3"
            size="22"
            v-show="!project.status"
            @click="check(project)"
          />
          <van-icon
            name="close"
            color="#A9B7C3"
            size="22"
            v-show="project.status"
            @click="err(project)"
          />
          <van-icon
            name="close"
            color="#F13845"
            size="22"
            v-show="!project.status"
            @click="err(project)"
          />
        </div>
      </dd>
    </dl>
    <div style="height: 0px"></div>
  </div>
</template>
<script setup>
import { queryReportClassAll, queryReportProjectAll } from 'api/testing.js'
import { onMounted, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
const router = useRouter()
const store = useStore()

const err = (project) => {
  router.push('/testing/error/' + project.detectionProjectId)
}

const check = async (project) => {
  store.commit('testing/removeFixById', project.detectionProjectId)
  let classAll = (await queryReportClassAll()).data
  let projectAll = (await queryReportProjectAll()).data
  projectAll.forEach((item) => {
    //取parentId,去classAll匹配
    let _class = classAll.find((cls) => {
      return cls.classesId == item.parentId
    })
    if (!_class) {
      return true
    }
    let isError = store.state.testing.fixList.find(
      (err) => err.id == item.detectionProjectId
    )
    //统计异常数量
    _class['errorCount'] = 0
    if (isError) {
      _class.errorCount++
      item['status'] = false
      item['text'] = isError.message
      item['file'] = isError.file[0]
    } else {
      item['status'] = true
    }

    //当与classesId匹配上，就将自己添加到对应的class上的list数组里,list是临时添加的
    let list = _class.list || []
    list.push(item)
    _class.list = list
  })
  state.classAll = classAll
}

const state = reactive({
  classAll: [],
})

const getAllList = () => {
  console.log('getAllList')
  return state.classAll
}
//检查项目类型列表
let classAll = (await queryReportClassAll()).data

//检查项目列表
let projectAll = (await queryReportProjectAll()).data

const init = async () => {
  projectAll.forEach((item) => {
    //取parentId,去classAll匹配
    let _class = classAll.find((cls) => {
      return cls.classesId == item.parentId
    })
    if (!_class) {
      return true
    }
    let isError = store.state.testing.fixList.find(
      (err) => err.id == item.detectionProjectId
    )
    //统计异常数量
    _class['errorCount'] = 0
    if (isError) {
      _class.errorCount++
      item['status'] = false
      item['text'] = isError.message
      item['file'] = isError.file[0]
    } else {
      item['status'] = true
    }

    //当与classesId匹配上，就将自己添加到对应的class上的list数组里,list是临时添加的
    let list = _class.list || []
    list.push(item)
    _class.list = list
  })
  state.classAll = classAll
}
init()

</script>

<style lang="scss" scoped>
h4,
h6,
dt,
dd,
dl {
  margin: 0;
  padding: 0;
}
.report {
  margin: 0 .1875rem /* 3/16 */ 3.125rem /* 50/16 */;
  // border-top: 1px solid #eee;
  // background: #e;
  min-height: 6.25rem /* 100/16 */;
  dl {
    padding: .5rem /* 8/16 */;
    dt {
      margin-bottom: .625rem /* 10/16 */;
      h4{
        font-size: 1.125rem /* 18/16 */;
        font-family: PingFang SC;
        font-weight: bold;
        color: #101D34;
      }
      div {
        font-size: .875rem /* 14/16 */;
        color: #F13845;
      }
    }
    dd {
      margin-bottom: .3125rem /* 5/16 */;
      h6{
        font-size: .9375rem /* 15/16 */;
        font-family: PingFang SC;
        font-weight: 500;
        color: #101D34;
      }
    }
    dt,
    dd {
      display: flex;
      h4,
      h6 {
        flex: 1;
        text-align: left;
      }
      div {
        width: 4.375rem /* 70/16 */;
        &.btn_group {
          display: flex;
          justify-content: space-around;
        }
      }
      h6 {
        color: rgb(82, 79, 79);
      }
    }
  }
}
</style>
